<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i>
					提现列表
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div>
				<div class="msg">
					<ul>
						<li>
							<h4>总实际到账金额</h4>
							<p>5800</p>
						</li>
						<li>
							<h4>总提现金额</h4>
							<p>0</p>
						</li>
					</ul>
				</div>
				<div class="search box">
					<div>
						姓名：
						<el-input placeholder="姓名查询" v-model="searchName" clearable></el-input>
					</div>
					<div class="date">
						<div class="block">
							<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
						</div>
					</div>
					<div class="btns" style="margin-left: 171px;">
						<el-button type="primary" icon="el-icon-search" @click="seach">查询</el-button>
						<el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
						<el-button type="primary" @click="exportToExcel">导出Excel文件</el-button>
					</div>
				</div>
				<div class="record">
					<el-button>全部（0）</el-button>
					<el-button>提现（0）</el-button>
					<el-button>提现中（0）</el-button>
					<el-button>提现成功（0）</el-button>
					<el-button>提现失败（0）</el-button>
				</div>
				<div class="list">
					<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 100%;margin: 0 auto;">
						<el-table-column fixed width="40px" type="index" label="ID" align="center"></el-table-column>
						<el-table-column fixed prop="name" label="姓名" align="center"></el-table-column>
						<el-table-column min-width="130px" prop="idcard" label="身份证" align="center"></el-table-column>
						<el-table-column min-width="110px" prop="phone" label="手机号" align="center"></el-table-column>
						<el-table-column prop="cash" label="提现金额" align="center"></el-table-column>
						<el-table-column prop="getCash" label="实际到账" align="center"></el-table-column>
						<el-table-column min-width="160px" prop="bankCard" label="银行卡" align="center"></el-table-column>
						<el-table-column min-width="200px" prop="getDate" label="申请提现时间" align="center"></el-table-column>
						<el-table-column prop="cashStatus" min-width="120px" label="状态" align="center">成功</el-table-column>
						<el-table-column prop="failed" min-width="120px" label="失败原因" align="center">无</el-table-column>
						<el-table-column fixed="right" label="操作" min-width="200px" align="center">
							<template slot-scope="scope">
								<el-button size="medium" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
								<el-button size="medium" type="danger" @click="Del(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="block">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="[4, 8]"
						:page-size="100"
						layout="total, sizes, prev, pager, next"
						:total="tableData.length"
					></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'dataStatistics',
	data() {
		return {
			searchOrderNum: '',
			searchName: '',
			searchCompany: '',
			orderTime: '',
			tableData: [],
			test: true,
			currentPage: 1,
			pageSize: 4,
			row:'',
			pickerOptions: {
				shortcuts: [
					{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}
				]
			},
			value1: ''
		};
	},
	watch: {
		navIndex(val, oldVal) {
			switch (val) {
				case '1':
					this.loadData('/api/getAgentSum');
					break;
				case '2':
					this.axios.get('/api/getPartnerSum').then(res => {
						console.log(res);
						this.tableData = res.data.msg;
					});
					break;
				default:
					break;
			}
		}
	},
	methods: {
		loadData(url) {
			this.axios.post(url).then(res => {
				console.log(res);
				this.tableData = res.data.tarArr;
			});
		},
		handleNavSelect(key, keyPath) {
			this.navIndex = key;
		},
		handleSizeChange(val) {
			this.pageSize = val;
		},
		handleCurrentChange(val) {
			this.currentPage = val;
		},
		seach() {
			this.axios
				.post('/api/getWithdrawStatus', {
					name: this.searchName
				})
				.then(res => {
					console.log(res)
					this.tableData = res.data.tarArr;
				});
		},
		reset() {
			this.searchName = '';
			this.loadData('/api/getWithdrawStatus');
		},
		Del(row){
			console.log(row._id)
			this.axios({
				method: 'post',
				url: '/api/getWithdrawStatus',
				data: {
					_id: row._id,
				}
			}).then(res => {
				console.log(res)
				// if(res.data.cde == 200){
				// 	this.$message.success(res.data.msg);
					
				// }
			});
		},
		exportToExcel() {
			//excel数据导出
			require.ensure([], () => {
				const { export_json_to_excel } = require('../../../assets/js/Export2Excel.js');
				const tHeader = ['姓名','身份证', '手机号', '提现金额','实际到账','银行卡','申请提现时间','状态','失败原因'];
				const filterVal = ['name','idcard', 'phone', 'cash','getCash', 'bankCard','getDate','cashStatus','failed'];
				const list = this.tableData;
				const data = this.formatJson(filterVal, list);
				export_json_to_excel(tHeader, data, '用户提现列表');
			});
		},
		formatJson(filterVal, jsonData) {
			return jsonData.map(v => filterVal.map(j => v[j]));
		}
	},
	mounted() {
		this.loadData('/api/getWithdrawStatus');
	}
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}

/*  */
.msg ul {
	display: flex;
	margin-bottom: 30px;
}

.msg li {
	width: 150px;
	list-style: none;
	text-align: center;
}

.msg li h4 {
	padding: 10px 0;
}

.box {
	display: flex;
	margin-bottom: 20px;
}

.box > div {
	margin-right: 10px;
}

.box > div > div {
	display: inline-block;
	width: 200px;
}

.list {
	margin-top: 10px;
}

.block {
	display: flex;
	justify-content: center;
}
</style>
